<template>
  <div class="flex gap-4">
    <div class="flex flex-col items-center gap-4 w-[360px] h-[504px] bg-bg-3 p-4 rounded">
      <a-avatar :size="144" trigger-type="mask">
        <img alt="avatar" :src="avatar" />
        <template #trigger-icon>
          <guat-icon icon="ph:pencil-line" :size="36" />
        </template>
      </a-avatar>
      <div class="my-4 text-2xl font-bold">系统管理员</div>
      <UserInfoDesc class="w-[80%]" size="large" :column="1" />
    </div>
    <a-card :bordered="false" class="flex-1">
      <a-tabs>
        <a-tab-pane key="base" title="个人信息">
          <div class="flex flex-col items-end gap-4">
            <guat-edit-user-info-form />
            <guat-button-group
              :buttons="[{ text: '重置' }, { text: '保存修改', type: 'primary' }]"
            />
          </div>
        </a-tab-pane>
        <a-tab-pane key="activityRecords" title="活动记录">
          <div class="flex flex-col items-end gap-4">
            <div class="grid grid-cols-4 gap-4">
              <a-card hoverable v-for="activity in activityRecords">
                <template #cover>
                  <div class="h-[184px] overflow-hidden">
                    <img
                      class="w-full"
                      alt="dessert"
                      src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
                    />
                  </div>
                </template>
                <a-card-meta :title="activity.activityName">
                  <template #description>
                    <div class="mt-4 flex flex-col gap-2">
                      <div>活动时间：{{ activity.activityTime }}</div>
                      <div>
                        当前状态：<a-tag :color="getTagColor(activity.status as number)">
                          {{ ActivityStatus[activity.status as 0] }}
                        </a-tag>
                      </div>
                    </div>
                  </template>
                </a-card-meta>
              </a-card>
            </div>
            <a-pagination :total="5" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="pointRecords" title="积分记录">
          <a-table :columns="pointRecordsTableColumns" :data="tableData" />
        </a-tab-pane>
      </a-tabs>
      <template #actions> </template>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import avatar from "@/assets/avatar.png";
import { baseInfoDesc } from "./desc-config";
import { editBaseInfoForm } from "./form-config";
import { pointRecordsTableColumns } from "./table-config";
import { ActivityStatus } from "@/constant/dictionary";

const [GuatEditUserInfoForm] = useForm(editBaseInfoForm);
const [UserInfoDesc, { setData }] = useDescriptions(baseInfoDesc);

const activityRecords = [
  {
    activityName: "第十五届蓝桥杯算法竞赛",
    activityTime: "2024年4月10日 9:00-14:00",
    status: ActivityStatus.FINISHED,
    activityCover: "",
  },
  {
    activityName: "第十五届蓝桥杯算法竞赛",
    activityTime: "2024年4月10日 9:00-14:00",
    status: ActivityStatus.ON_GOING,
    activityCover: "",
  },
  {
    activityName: "第十五届蓝桥杯算法竞赛",
    activityTime: "2024年4月10日 9:00-14:00",
    status: ActivityStatus.PAUSE,
    activityCover: "",
  },
  {
    activityName: "第十五届蓝桥杯算法竞赛",
    activityTime: "2024年4月10日 9:00-14:00",
    status: ActivityStatus.FINISHED,
    activityCover: "",
  },
  {
    activityName: "第十五届蓝桥杯算法竞赛",
    activityTime: "2024年4月10日 9:00-14:00",
    status: ActivityStatus.FINISHED,
    activityCover: "",
  },
];

const tableData = [
  {
    title: "第十五届蓝桥杯算法竞赛省赛一等奖",
    changeTime: "2024-05-10 12:50:22",
    changeType: "加分",
    point: 100,
    pointType: "竞赛积分",
  },
  {
    title: "第十五届蓝桥杯算法竞赛国赛二等奖",
    changeTime: "2024-04-10 20:23:30",
    changeType: "加分",
    point: 150,
    pointType: "竞赛积分",
  },
  {
    title: "2023-2024学年第二学期第六周周赛一等奖",
    changeTime: "2024-04-06 15:56:00",
    changeType: "加分",
    point: 50,
    pointType: "竞赛积分",
  },
  {
    title: "2023-2024学年第二学期第五周周赛一等奖",
    changeTime: "2024-03-31 12:23:27",
    changeType: "加分",
    point: 100,
    pointType: "竞赛积分",
  },
  {
    title: "第十五届蓝桥杯算法竞赛省赛一等奖",
    changeTime: "2024-04-10 20:00:00",
    changeType: "加分",
    point: 100,
    pointType: "竞赛积分",
  },
  {
    title: "第十五届蓝桥杯算法竞赛省赛一等奖",
    changeTime: "2024-04-10 20:00:00",
    changeType: "加分",
    point: 100,
    pointType: "竞赛积分",
  },
  {
    title: "第十五届蓝桥杯算法竞赛省赛一等奖",
    changeTime: "2024-04-10 20:00:00",
    changeType: "加分",
    point: 100,
    pointType: "竞赛积分",
  },
  {
    title: "第十五届蓝桥杯算法竞赛省赛一等奖",
    changeTime: "2024-04-10 20:00:00",
    changeType: "加分",
    point: 100,
    pointType: "竞赛积分",
  },
  {
    title: "第十五届蓝桥杯算法竞赛省赛一等奖",
    changeTime: "2024-04-10 20:00:00",
    changeType: "加分",
    point: 100,
    pointType: "竞赛积分",
  },
  {
    title: "第十五届蓝桥杯算法竞赛省赛一等奖",
    changeTime: "2024-04-10 20:00:00",
    changeType: "加分",
    point: 100,
    pointType: "竞赛积分",
  },
  {
    title: "第十五届蓝桥杯算法竞赛省赛一等奖",
    changeTime: "2024-04-10 20:00:00",
    changeType: "加分",
    point: 100,
    pointType: "竞赛积分",
  },
  {
    title: "第十五届蓝桥杯算法竞赛省赛一等奖",
    changeTime: "2024-04-10 20:00:00",
    changeType: "加分",
    point: 100,
    pointType: "竞赛积分",
  },
];

const getTagColor = (status: number) => {
  const colors = {
    [ActivityStatus.ON_GOING]: "green",
    [ActivityStatus.PAUSE]: "red",
  };
  return colors[status];
};

onMounted(() => {
  setData({
    userNo: "2020070030506",
    role: {
      roleId: 0,
      roleName: "管理员",
    },
    grade: "2020级",
    registerTime: "2020-10-09 08:00:00",
    status: 0,
    points: 1200,
  });
});
</script>

<style scoped></style>
